<style>
    a {
        text-decoration: none;
    }

    p, ul, li {
        cursor: pointer;
    }


</style>
<div id="app">
    <!--导航栏-->

    <template>

        <v-navigation-drawer
                v-model="drawer"
                persistent
                fixed
                temporary
                app
        >
            <v-list>
                <v-list-tile>
                    <v-list-tile-action>
                        <img :src="userimage">
                    </v-list-tile-action>
                    <v-list-tile-title>
                        <p>{{username}}</p>
                    </v-list-tile-title>
                </v-list-tile>


                <v-list-group
                      v-for="firstitem in title"
                >
                    <template v-slot:activator>
                        <v-list-tile>
                            <v-list-tile-title>{{firstitem.title}}</v-list-tile-title>
                        </v-list-tile>
                    </template>



                        <v-list-tile
                                v-for="(Children, i) in firstitem.body"
                                :key="i"
                                @click="count(Children)"
                        >
                            <v-list-tile-title v-text="Children.title"  ></v-list-tile-title>
                        </v-list-tile>

                </v-list-group>

                <v-list-tile
                        v-for="(Children, i) in titlebut"
                        :key="i"
                        @click="count(Children)"
                >
                    <v-list-tile-title v-text="Children.title"   ></v-list-tile-title>
                </v-list-tile>

            </v-list>





        </v-navigation-drawer>


    </template>
    <!--logo位置-->

    <!--xs  md lg-->
    <template>

        <v-toolbar
                color="teal lighten-3"
                app
                class="nav"


        >
            <v-flex xs1 class="hidden-md-and-up">
                <div class="d-inline-flex" v-if="userimage=='/LxCommunity/static/image/weidenglu.png'">
                    <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
                </div>
                <div class="d-inline-flex" v-else="userimage!='/LxCommunity/static/image/weidenglu.png'">
                    <v-list-tile-avatar>
                        <img :src="userimage" alt="John" @click.stop="drawer = !drawer">
                    </v-list-tile-avatar>
                </div>

            </v-flex>
            <v-menu open-on-hover bottom offset-y
                    v-for="items in title"
                    :lazy="true"
            >
                <template v-slot:activator="{ on }">
                    <v-btn
                            color="teal lighten-3"
                            dark
                            v-on="on"
                            class="elevation-0 hidden-xs-only"
                            @click="count(items)"
                    >
                        {{items.title}}
                    </v-btn>
                </template>
                <v-list class="munback">
                    <v-list-tile
                            v-for="(item, index) in items.body"
                            :key="index"
                            @click="count(item)"
                    >
                        <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                    </v-list-tile>
                </v-list>
            </v-menu>
            <v-btn
                    color="teal lighten-3"
                    dark
                    v-for="item in titlebut"
                    class="elevation-0 hidden-xs-only"
                    @click="count(item)"
            >{{item.title}}
            </v-btn>
            <v-flex xs4 offset-xs4 class="hidden-md-and-up">
                <span>乐享社区</span></v-flex>
            <v-spacer></v-spacer>
            <v-flex xs3 sm2>
                <v-layout fill-height class="hidden-sm-and-down">
                    <div v-if="userimage != '/LxCommunity/static/image/weidenglu.png'" class="d-inline-flex ">
                        <img :src="userimage"
                             class="px-0 py-0 "
                             style="border-radius: 50%;border: 1px solid #ffffff;width: 48px;height: 48px;margin: auto auto ">
                        <v-menu
                                :lazy="true"
                                v-model="menu"
                                open-on-hover
                                :close-on-content-click="false"
                                :nudge-width="250"
                                offset-x
                        >
                            <template v-slot:activator="{ on }">
                                <v-btn
                                        dark
                                        v-on="on"
                                        class="elevation-0 hidden-sm-and-down px-0 py-0"
                                        color="teal lighten-3"
                                        style="margin: auto auto "
                                >
                                    {{username}}
                                </v-btn>
                            </template>

                            <v-card id="userlogin_info">
                                <v-list>
                                    <v-list-tile avatar>
                                        <v-list-tile-avatar>
                                            <img :src="userimage" alt="John">
                                        </v-list-tile-avatar>

                                        <v-list-tile-content>
                                            <v-list-tile-title><span
                                                    style="color: #29B6F6;border:1px solid #29B6F6"
                                                    class="px-2 py-0">欢迎来到本站!</span>
                                            </v-list-tile-title>
                                            <v-list-tile-sub-title class="py-1"><span>会员：{{username}} <a
                                                    href="#">个人设置</a></span></v-list-tile-sub-title>
                                        </v-list-tile-content>
                                        <v-list-tile-action>
                                            <v-btn
                                                    :class="fav ? 'red--text' : ''"
                                                    icon
                                                    @click="fav = !fav"
                                            >
                                                <v-icon>favorite</v-icon>
                                            </v-btn>
                                        </v-list-tile-action>
                                    </v-list-tile>
                                </v-list>
                                <v-divider></v-divider>
                                <v-list>
                                    <v-list-tile>
                                        <v-list-tile-action>
                                            <v-switch v-model="message" color="purple"></v-switch>
                                        </v-list-tile-action>
                                        <v-list-tile-title>Enable messages</v-list-tile-title>
                                    </v-list-tile>
                                    <v-list-tile>
                                        <v-list-tile-action>
                                            <v-switch v-model="hints" color="purple"></v-switch>
                                        </v-list-tile-action>
                                        <v-list-tile-title>Enable hints</v-list-tile-title>
                                    </v-list-tile>
                                </v-list>
                                <v-card-actions>
                                    <v-spacer></v-spacer>

                                    <v-btn flat @click="menu = false">Cancel</v-btn>
                                    <v-btn color="primary" flat @click="menu = false">Save</v-btn>
                                </v-card-actions>
                            </v-card>
                        </v-menu>
                        <span style="margin: auto auto " class="elevation-0 hidden-sm-and-down">
                                    <a href="#" @click="quituser()">退出</a></span>
                    </div>
                    <div v-if="userimage=='/LxCommunity/static/image/weidenglu.png'" row class="d-inline-flex mt-1">
                        <img :src="userimage"
                             class="px-0 py-0 userlogin"

                             style="margin: auto auto">

                        <v-card id="userlogin" class=" ml-3 elevation-0 userlogin hidden-sm-and-down"
                                color="teal lighten-3"
                                style="margin: auto auto">
                            <v-card-text style="padding: 0px"><p class="text-xs-center caption mt-2">登录</p>
                            </v-card-text>

                        </v-card>
                        <v-card id="userregist" class=" ml-3 elevation-0  hidden-sm-and-down" color="teal lighten-3"
                                style="margin: auto auto">
                            <v-card-text style="padding: 0px"><p class="text-xs-center caption mt-2">注册</p>
                            </v-card-text>

                        </v-card>
                    </div>

                </v-layout>
            </v-flex>


        </v-toolbar>
        <div id="contenttable"></div>

    </template>

    <v-btn

            v-model="fab"
            v-if="buttotop"
            color="teal"
            dark
            fab
            fixed
            bottom
            right

            @click="hrefInTop()"
    >
        <v-icon>keyboard_arrow_up</v-icon>
    </v-btn>

</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                title: "分析",
                disabel: true,
                dark: false,// 是否暗黑主题
                drawer: false,// 左侧导航是否隐藏
                fav: true,
                fab: false,
                menu: false,
                message: false,
                hints: true,
                buttotop: false,
                userimage: "/LxCommunity/static/image/weidenglu.png",

                username: "未登录",
                title: [{
                    title: "论坛",
                    href: "/LxCommunity/",
                    body: [{title: "java教程"}, {title: "前端教程"}, {title: "php教程"}, {title: "python教程"},
                        {title: "linux运维"}, {title: "微信教程"}]
                },
                    {
                        title: "资源汇总",
                        body: [{title: "IT教程"}, {title: "电子书"}, {title: "软件下载"}]
                    },


                ],
                titlebut: [{title: "博客", href: "/LxCommunity/"},
                    {title: "资源悬赏",href: "/LxCommunity/"},
                    {title: "礼品兑换", href: "/LxCommunity/html/Tpublish.html"},
                    {title: "发布资源", href: "/LxCommunity/html/Tpublish.html"}],

                admins: [
                    ['Management', 'people_outline'],
                    ['Settings', 'settings']
                ],
                cruds: [
                    ['Create', 'add'],
                    ['Read', 'insert_drive_file'],
                    ['Update', 'update'],
                    ['Delete', 'delete']
                ]
            }

        },
        methods: {
            count: function (str) {
                location.href = str.href
            },
            quituser: function () {
                $.get("/LxCommunity/user/quituser", function () {
                    window.location.reload()
                    $.cookie('username', {path: '/'});
                    $.cookie('userid', {path: '/'});

                });
            },
            hrefInTop: function () {

                $("html,body").animate({scrollTop: $("#contenttable").offset().top - $('.nav').outerHeight()}, 350);

            }
            ,
            buttotopfun: function () {
                if ($(window).scrollTop() > 50) {
                    this.buttotop = true
                } else {
                    this.buttotop = ''
                }
            }
        }
        ,
        mounted() {
            var self = this;
            window.addEventListener('scroll', this.buttotopfun)
            axios.get("/LxCommunity/user/finduser").then(data => {

                if (data.data.flag) {
                    self.username = data.data.data.username;
                    self.userimage = data.data.data.image;
                }


            });
        },


    })

</script>

<script type="text/javascript">

    $(function () {

        $(".userlogin").click(function () {
            window.location.href = "/LxCommunity/html/login.html"
        })
        $(".userlogin_but").click(function () {
            window.location.href = "/LxCommunity/html/login.html"
        })
        $("#userregist").click(function () {
            window.location.href = "/LxCommunity/html/register.html"
        })
        $("#exitlogin").click(function () {
            $.get("/LxCommunity/user/quituser", function () {
                $.removeCookie('username', {path: '/'});
                $.removeCookie('userid', {path: '/'});
                window.location.reload()
            });


        })


    })
</script>
<script>
    // 监听页面的滚动
    $(function () {
        //获取导航栏的高度，此高度用于保证内容的平滑过渡
        var martop = $('.nav').outerHeight();
        // 修改内容的margin-top值，保证平滑过渡
        $("#contenttable").css({"margin-top": martop});
        $("#contenttable").height(1);
    })
    $(window).scroll(function () {
        // 修改内容的margin-top值，保证平滑过渡
        //获取导航栏的高度，此高度用于保证内容的平滑过渡
        var martop = $('.nav').outerHeight();
        $("#contenttable").css({"margin-top": martop});
        $("#contenttable").height(1);


    });

</script>
<script>

    function marginbodyfun() {
        var width = $(document.body).width();
        if (width <= 600) {
            $(".marginbody").css({"padding-left": "5px", "padding-right": "5px"})
        } else if (width > 600 && width <= 760) {
            $(".marginbody").css({"padding-left": "20px", "padding-right": "20px"})

        } else if (width > 760 && width <= 960) {
            $(".marginbody").css({"padding-left": "40px", "padding-right": "40px"})

        } else if (width > 960 && width <= 1264) {
            $(".marginbody").css({"padding-left": "70px", "padding-right": "70px"})

        } else if (width > 1200) {
            $(".marginbody").css({"padding-left": "100px", "padding-right": "100px"})

        }
    }

    $(function () {
        marginbodyfun();

    })
    $(window).resize(function () {

        marginbodyfun();
    })
</script>
